<template>
  <div>
    <h2>Home</h2>
    <div>
      <button @click="$router.forward()">前进</button>
      <button @click="$router.back()">后退</button>
      <button @click="$router.go(2)">前进2</button>
    </div>
    <router-link
      :to="{
        name: 'news',
      }"
    >
      news</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '1',
          time: undefined,
        },
      }"
    >
      华语</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '2',
        },
      }"
    >
      粤语</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '3',
          time: undefined,
        },
      }"
    >
      英语</router-link
    >

    <router-link
      :to="{
        name: 'game',
        query: {
          tit: '艾尔登法环',
          publisher: '粉丝社',
        },
      }"
    >
      游戏1</router-link
    >

    <router-link
      :to="{
        name: 'game',
        query: {
          tit: '鬼泣',
          publisher: 'Capcom',
        },
      }"
    >
      游戏2</router-link
    >

    <div>
      <button @click="movieOne">电影一</button>
      <button @click="movieTwo">电影二</button>
      <button @click="movieThree">电影三</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    movieOne() {
      this.$router.replace("/home/movie?movieName=独行月球&timer=2022");
    },
    movieTwo() {
      this.$router.push({
        path: "/home/movie",
        query: {
          movieName: "夏洛特烦恼",
          timer: "2018",
        },
      });
    },
    movieThree() {
      this.$router.push({
        name: "movie",
        // 这种传参可能在前进或后退中丢失参数,因为不会在路径上显示出来
        params: {
          movieName: "西虹市首富",
          timer: "2020",
        },
      });
    },
  },
};
</script>

<style>
</style>